<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        i,em{ font-style: normal;}
        #cont{
            margin:  auto;
        }
        .box{
            width: 19%;
            border:solid 1px black;
            float: left;
            margin: 0 10px 20px 0;

        }
        .box img{
            width: 100%;
        }
        .box p{
            height: 30px;
            line-height: 30px;
            padding-left: 5px;
            color: red;
            display: inline-block;
            text-align: left;
            font-size: 20px;
        }
        .box  .z{
            background-color: red;
            color: white;
            width: 32px;
            height: 22px;
            line-height: 24px;
            text-align: center;
            padding: 0;
            margin-left: 5px;
            font-size: 16px;
        }
        .box .brand{
            font-size: 14px;
            padding:  0 5px;
            /* width: 290px; */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            color: rgba(0, 0, 0, 0.7);
        }
        .box .gf{
            font-size: 14px;
            color: rgba(0, 0, 0, 0.5);
            padding-left: 5px;
        }
        .box .ys{
            font-size: 14px;
            padding-left: 5px;
            color: rgba(0, 0, 0, 0.4);
        }
        .box .ys em{
            color: rgba(25, 74, 152, 1);
        }
    </style>
</head>
<body>
    <div id="cont"></div>
    <script src="./data.js"></script>
    <script>
        var str = '';
        data.forEach(function(val){
            str +='<div class="box"><img src="'+  val.img +'"><p>'+ "&yen" + val.price +'</p><p class="z">'+ val.discount + "折" +'</p><br><i class="brand">'+ val.brand + '&nbsp;' + val.proName +'</i><i class="gf">'+ val.brand + "官方旗舰店" +'</i><br><p class="ys">已售<em>'+ val.sales + '</em>部</p></div>'
        })
        cont.innerHTML = str;
    </script>
</body>
</html>